<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>景旭商城-个人中心</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta content="zh-cn" http-equiv="content-language" />
<meta content="" name="copyright" />
<%@ include file="/page/pc/include.jsp"%>
<style type="text/css">
* {
	font-size: 14px;
}

.footer0 {
	height: 90px;
}
</style>

<script type="text/javascript" src="<%=basePath%>/page/pc/my/statics/cropbox.js"></script>


<%-- 裁剪头像样式、JS begin --%>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/page/pc/my/statics/normalize.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/page/pc/my/statics/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/page/pc/my/statics/style.css?v=20180104" />
<script>window.jQuery || document.write('<script src="<%=basePath%>/page/pc/my/statics/jquery-1.11.0.min.js"><\/script>')
</script>

<%-- 裁剪头像样式、JS end --%>

</head>
<body style="background: #f5f5f5">
	<div class="wrap">
		<jsp:include page="_my_header.jsp" />
		<div class="site_wrap18">
			<div class="site_wrap18_con">
				<div class="main">
					<jsp:include page="_my_left.jsp" />
					<div class="rightitem">
						<div class="grxx_part">
							<div class="grxx_part_con">
								<div class="hd">
									<ul>
										<li class="current"><a href="javascript:void(0)">基本信息<i></i></a></li>
										<li><a href="javascript:void(0)">头像照片<i></i></a></li>
										<!-- <li><a href="javascript:void(0)">开票信息<i></i></a></li> -->
									</ul>
								</div>
								<div class="bd">
									<div class="grxx_con">
										<div class="grxx_info1">
											<div class="grxx_info1_1">
												<div class="grxx_info1_1_con">
													<div class="pic">
														<img id="myHeadImg" src="${imgRootURL }${user.path}" onerror="this.src='${rootPath }/statics/images/default.jpg'" />
													</div>
													<div class="item-info">
														<h2>用户名：${userName }</h2>
														<h3>
															<i><%-- <img src="<%=basePath%>/statics/images/icon_v.png" /> --%></i><%-- <span> ${customerLevel } 级会员</span> --%>
														</h3>
														<h4></h4>
														<h5>会员类型：企业用户</h5>
													</div>
												</div>
											</div>
											<dl>
												<dt>
													<strong>用户名：</strong>
													<div class="txt1">
														<p>
															<input id="nowUserName" type="hidden" value="${userName }"/>
															<input id="userName" type="text" value="${userName }" onblur="showUpdateUserName();"/>
														</p>
													</div>
												</dt>
												<dt>
													<strong>登录名：</strong>
													<div class="txt1">
														<p>
															${userCode } &nbsp; 可用于登录，请牢记~
														</p>
													</div>
												</dt>
												<dt>
													<strong>手机号码：</strong>
													<div class="txt1">
														<p>${user.mobile }</p>
													</div>
												</dt>
												<dt>
													<strong>邮箱：</strong>
													<div class="txt1">
														<p>${user.email }</p>
													</div>
												</dt>
											</dl>
										</div>
									</div>
									<div class="grxx_con">
										<div class="grxx_info2">
											<%-- 裁剪头像 begin --%>
											<div class="htmleaf-container">
												<div class="container">
													<s></s>
													<div class="imageBox">
														<div class="thumbBox"></div>
														<div class="spinner" style="display: none">Loading...</div>
													</div>
													<div class="action">
														<div class="new-contentarea tc">
															<a href="javascript:void(0)" class="upload-img"><label for="upload-file">选择图片</label></a> <input type="file" name="upload-file"
																id="upload-file" />
														</div>
														<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切"> <input type="button" id="btnZoomIn" class="Btnsty_peyton"
															value="+"> <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
													</div>
													<div class="cropped" id="imageCutBox"></div>
													<div style="position: absolute; right: -250px; top: 510px;">
														<input type="button" id="btnConfirm" class="Btnsty_peyton" style="width: 200px;" value="确认修改头像">
													</div>
												</div>
											</div>
											<%-- 裁剪头像 end --%>
											<br> <br> <br>
											<div>
												<label>1、仅支持<em class="tipLable"> JPG、GIF、PNG、JPEG、BMP</em>格式，文件小于<em class="tipLable"> 4 MB</em>。
												</label><br>
												<br> <label>2、选择图片后，您可点击图片可拖动图片位置，通过点击按钮 [<em class="tipLable"> - </em>][<em class="tipLable"> + </em>]或者滚动鼠标滚轮调整图片尺寸。
												</label><br>
												<br> <label>3、确定好裁切图片的位置及尺寸后，点击按钮[<em class="tipLable"> 裁切 </em>]，实现图片裁剪，裁剪后的预览图会在右侧生成。
												</label><br>
												<br> <label>4、您上传的图片会自动生成<em class="tipLable"> 3 </em>种尺寸，请注意小尺寸，头像是否清晰
												</label>
											</div>
										</div>
									</div>
								</div>
								<div class="grxx_con">
									<div class="grxx_info3">
										<form action="" name="companyForm" id="companyForm" method="post">
											<dl>
												<dt>
													<strong><em></em>发票抬头：</strong>
													<div class="txt1">
														<input type="text" class="inputstyle1" validate="{required:true}" name="companyName" id="companyName" value="${company.companyName }" />
													</div>
												</dt>
												<dt>
													<strong>注册地址：</strong>
													<div class="txt1">
														<input type="text" class="inputstyle1" validate="{required:true}" id="registAddr" name="registAddr" value="${company.registAddr }" />
													</div>
												</dt>
												<dt>
													<strong>公司电话：</strong>
													<div class="txt1">
														<input type="text" class="inputstyle1" id="tel" name="tel" value="${company.tel }" />
													</div>
												</dt>
												<dt>
													<strong>税号：</strong>
													<div class="txt1">
														<input type="text" class="inputstyle1" id="taxNo" name="taxNo" value="${company.taxNo }" />
													</div>
												</dt>
												<dt>
													<strong>开户行：</strong>
													<div class="txt1">
														<input type="text" class="inputstyle1" id="bankName" name="bankName" value="${company.bankName }" />
													</div>
												</dt>
												<dt>
													<strong>银行账号：</strong>
													<div class="txt1">
														<input type="text" class="inputstyle1" id="bankAccount" name="bankAccount" value="${company.bankAccount }" />
													</div>
												</dt>
												<dt>
													<strong>&nbsp;</strong>
													<div class="txt1">
														<input type="submit" id="btnSaveCompany" class="btn-success" value="保存" />
													</div>
												</dt>
											</dl>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!---网站底部开始-->
	<div>
		<!---网站底部开始-->
		<div class="footer">
			<c:if test="${param.showQaFlag == '1' }">
				<div class="site_wrap4">
					<div class="bg1">
						<div class="site_wrap4_con">
							<div class="hd">
								<h3>
									<b>常见问题</b>
								</h3>
							</div>
							<div class="bd">
								<div class="faq_list">
									<ul id='qa_list_container'>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</c:if>

			<div class="footer0">
				<div class="footer0_con">
					<ul>
						<li><img src="<%=basePath%>/statics/images/footer_icon1.png" /><span>品类齐全 轻松购物</span></li>
						<li><img src="<%=basePath%>/statics/images/footer_icon2.png" /><span>多仓直发 极速配送</span></li>
						<li><img src="<%=basePath%>/statics/images/footer_icon3.png" /><span>正品行货 精致服务</span></li>
						<li><img src="<%=basePath%>/statics/images/footer_icon4.png" /><span>天天低价 畅选无忧</span></li>
					</ul>
				</div>
			</div>
			<div class="footer1">
				<div class="footer_con">
					<div class="footer_wrap2">
						<dl id="shopping_finger_container">
							<dt>
								<h3>购物指南</h3>
							</dt>
						</dl>
						<dl id="delivery_container">
							<dt>
								<h3>配送方式</h3>
							</dt>
						</dl>
						<dl id="pay_type_container">
							<dt>
								<h3>支付方式</h3>
							</dt>
						</dl>
						<dl id="after_sales_container">
							<dt>
								<h3>售后服务</h3>
							</dt>
						</dl>
					</div>
				</div>
			</div>
			<div class="footer2">
				<div class="footer2_con">
					<div class="site_footernav">
						<p>
							<a href="#">关于我们</a><span></span> <a href="#">联系我们</a><span></span> <a href="#">帮助中心</a><span></span> <a href="#">意见反馈</a>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!---网站底部结束-->
		<script charset="utf-8" language="javascript" type="text/javascript" src="<%=basePath%>/statics/js/nav.js"></script>
		<script type="text/javascript" src="<%=basePath%>/statics/js/jquery.validate.js"></script>
		<script type="text/javascript">
			$(function() {
				var url = rootPath + "/pc/footer";
				var params = {};
				$.ajax({
					type : "post",
					url : url,
					data : params,
					datatype : "json",
					success : function(json) {
						if (json.qaList) {
							for (var i = 0; i < json.qaList.length; i++) {
								var config = json.qaList[i];
								var li = $("<li><a href=\""+config.linkUrl+"\">" + config.configTitle + "</a></li>");
								$("#qa_list_container").append(li);
							}
						}

						if (json.shoppingList) {
							for (var i = 0; i < json.shoppingList.length; i++) {
								var config = json.shoppingList[i];
								var dd = $("<dd><a href=\""+config.linkUrl+"\">" + config.configTitle + "</a></dd>");
								$("#shopping_finger_container").append(dd);
							}
						}
						if (json.deliveryList) {
							for (var i = 0; i < json.deliveryList.length; i++) {
								var config = json.deliveryList[i];
								var dd = $("<dd><a href=\""+config.linkUrl+"\">" + config.configTitle + "</a></dd>");
								$("#delivery_container").append(dd);
							}
						}
						if (json.payTypeList) {
							for (var i = 0; i < json.payTypeList.length; i++) {
								var config = json.payTypeList[i];
								var dd = $("<dd><a href=\""+config.linkUrl+"\">" + config.configTitle + "</a></dd>");
								$("#pay_type_container").append(dd);
							}
						}
						if (json.afterSalesList) {
							for (var i = 0; i < json.afterSalesList.length; i++) {
								var config = json.afterSalesList[i];
								var dd = $("<dd><a href=\""+config.linkUrl+"\">" + config.configTitle + "</a></dd>");
								$("#after_sales_container").append(dd);
							}
						}
					},
					error : function() {
						layer.msg('查询指南类信息失败');
					}
				});
			});
		</script>
		<!---网站底部结束-->
	</div>

	<script type="text/javascript">
		$(function() {
			$("#companyForm").validate({
				rules : {
					companyName : {
						required : true,
						minlength : 3
					},
					tel : {
						isPhone : true
					},
					taxNo : {
						specstr : true
					},
					bankAccount : {
						number : true
					}
				},
				messages : {
					companyName : {
						required : '请输入公司名称',
						minlength : '最少输入3个字符'
					},
					tel : {
						isPhone : '公司电话不正确'
					},
					taxNo : {
						specstr : '税号不正确'
					},
					bankAccount : {
						number : '请输入正确的银行账号'
					}
				},
				errorPlacement : function(error, element) {
					var error_td = element.parent();
					error_td.find('.field_notice').hide();
					error_td.parent().find('input').addClass('erros');
					error_td.append(error);
				},
				success : function(label) {
					label.parent().find('input').removeClass('erros');
					label.addClass('validate_right').text('');
				},
				onkeyup : false,
				submitHandler : function(form) {
					saveCompany();
				}
			});
		});
		// 保存公司信息
		function saveCompany() {
			var companyName = $("#companyName").val().trim();
			var registAddr = $("#registAddr").val().trim();
			var tel = $("#tel").val().trim();
			var taxNo = $("#taxNo").val().trim();
			var bankName = $("#bankName").val().trim();
			var bankAccount = $("#bankAccount").val().trim();
			$.ajax({
				type : "post",
				url : rootPath + '/pc/my/modCompany',
				data : {
					companyName : companyName,
					registAddr : registAddr,
					tel : tel,
					taxNo : taxNo,
					bankName : bankName,
					bankAccount : bankAccount
				},
				async : false,
				datatype : "json",
				success : function(json) {
					if (json.code == '1') {
						layer.msg(json.msg, {
							time : 2000
						});
					} else {
						layer.msg(json.msg, {
							time : 2000,
							icon : 2
						});
					}
				},
				error : function() {
					layer.msg('头像上传失败', {
						time : 1000,
						icon : 2
					});
				}
			});
		}
		
		//修改用户名
		function showUpdateUserName(){
			var userName = $("#userName").val();
			var nowUserName = $("#nowUserName").val();
			if (userName != "" && nowUserName != userName) {
				layer.confirm("确认修改用户名？", {
					title: '编辑',
					btn: ['确定','取消'], //按钮
					skin: 'del-class' //样式类名
				}, function(index){
					updateUserName(userName);
					parent.layer.close(index);
				});
			} else {
				$("#userName").val(nowUserName);
			}
		}
		//修改用户名
		function updateUserName(userName){
			$.ajax({
				type : "post",
				url : rootPath + '/pc/my/modUserName',
				data : {
					userName : userName
				},
				async : false,
				datatype : "json",
				success : function(json) {
					if (json.resultCode == '1') {
						layer.msg(json.resultMsg, {
							time : 2000
						});
						setTimeout(function(){
							window.location.href = rootPath + "/pc/my";
						}, 2000);
					} else {
						layer.msg(json.resultMsg, {
							time : 2000,
							icon : 2
						});
					}
				},
				error : function() {
					layer.msg('头像上传失败', {
						time : 1000,
						icon : 2
					});
				}
			});
		}

		$(function() {
			jQuery('.grxx_part_con .hd ul li').click(function() {
				TabSelect(".grxx_part_con .hd ul li", "div.grxx_con", "current", jQuery(this))
			});
			jQuery('.grxx_part_con .hd ul li').eq(0).trigger("click");
		});
		jQuery('#duice').click(function() {
			jQuery('.wthpop').show();
		})
		jQuery('.wthpop>p>span').click(function() {
			jQuery('.wthpop').hide()
		})

		//tab function
		function TabSelect(tab, con, addClass, obj) {
			var jQuery_self = obj;
			var jQuery_nav = jQuery(tab);

			jQuery_nav.removeClass(addClass), jQuery_self.addClass(addClass);

			var jQuery_index = jQuery_nav.index(jQuery_self);
			var jQuery_con = jQuery(con);
			jQuery_con.hide(), jQuery_con.eq(jQuery_index).show();
		}
	</script>

	<%-- 裁剪头像JS begin --%>
	<script type="text/javascript">
		$(function() {
			// 加载原有头像
			var headImage = '${user.path}';
			if (headImage) {
				var img = imgRootURL + headImage;
				$('#imageCutBox').html('');
				$('#imageCutBox').append('<img src="'+img+'" id="smallImg" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64 * 64像素</p>');
				$('#imageCutBox').append('<img src="'+img+'" id="middleImg" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128 * 128像素</p>');
				$('#imageCutBox').append('<img src="'+img+'" id="largeImg" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180 * 180像素</p>');
			}
		});

		$(window).load(function() {
			var options = {
				thumbBox : '.thumbBox',
				spinner : '.spinner'
			};
			var cropper = $('.imageBox').cropbox(options);
			$('#upload-file').on('change', function() {
				var reader = new FileReader();
				reader.onload = function(e) {
					options.imgSrc = e.target.result;
					cropper = $('.imageBox').cropbox(options);
				}
				reader.readAsDataURL(this.files[0]);
				this.files = [];
			});
			$('#btnCrop').on('click', function() {
				var img = cropper.getDataURL();
				$('#imageCutBox').html('');
				$('#imageCutBox').append('<img src="'+img+'" id="smallImg" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64 * 64像素</p>');
				$('#imageCutBox').append('<img src="'+img+'" id="middleImg" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128 * 128像素</p>');
				$('#imageCutBox').append('<img src="'+img+'" id="largeImg" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180 * 180像素</p>');
			});
			$('#btnZoomIn').on('click', function() {
				cropper.zoomIn();
			});
			$('#btnZoomOut').on('click', function() {
				cropper.zoomOut();
			});
			$("#btnConfirm").on('click', function() {
				var image = $("#largeImg").attr('src');
				if (!image) {
					layer.msg('请正确的选择、裁剪图片！', {
						time : 2000
					});
					return;
				}
				if (image.indexOf('data:image/png;base64,') == -1) {
					layer.msg('请重新选择图片！', {
						time : 2000
					});
					return;
				}
				layer.msg('您确定要上传新头像吗？', {
					time : 0, //不自动关闭
					btn : [ '确认', '取消' ],
					yes : function(index) {
						$.ajax({
							type : "post",
							url : rootPath
									+ '/pc/my/modHeadImg',
							data : {
								image : image
							},
							async : false,
							datatype : "json",
							success : function(json) {
								if (json.code == '1' && json.data) {
									layer.msg(json.msg, function() {
										if (json.data) {
											var img = imgRootURL + json.data;
											
											$("#myHeadImg").attr('src', img);
											
											$('#imageCutBox').html('');
											$('#imageCutBox').append('<img src="'+img+'" id="smallImg" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64 * 64像素</p>');
											$('#imageCutBox').append('<img src="'+img+'" id="middleImg" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128 * 128像素</p>');
											$('#imageCutBox').append('<img src="'+img+'" id="largeImg" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180 * 180像素</p>');
										}
									},
									{
										icon : 2,
										time : 500
									});
								} else {
									layer.msg(json.msg, {
										time : 2000
									});
								}
							},
							error : function() {
								layer.msg('头像上传失败', {
									time : 1000
								});
							}
						});
					}
				});
			});
		});
	</script>
	<%-- 裁剪头像JS end --%>
</body>
</html>